@()(implicit request: RequestHeader)
@admin.main("文件管理")("manage") {
	<style>
			.icon2x {
				width: 24px;
				font-size: 20px;
				min-width: 24px;
				display: inline-block;
			}

	</style>

			<div class="page-content">
				<div class="page-bar">
					<ul class="page-breadcrumb">
						<li>
							<i class="fa fa-wrench"></i>
							<a href="#">文件管理</a>
						</li>
					</ul>
				</div>



				<div class="row-fluid">
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet blue-madison box">
								<div class="portlet-title">
									<div class="caption">
										文件管理
									</div>
								</div>

								<div class="portlet-body">

									<div id="toolbar">
										<button type="button" class="btn btn-primary" id="deleteButton" onclick="addProject()">
											<i class="fa fa-plus"></i>&nbsp;上传文件
										</button>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true">
										<thead>
											<tr>
												<th data-field="name" data-sortable="true">文件名</th>
												<th data-field="time" data-sortable="true">上传时间</th>
												<th data-field="address" data-sortable="true"
												data-formatter="addressFmt">下载地址</th>
												<th data-field="operate" data-formatter="operateFmt"
												>操作</th>
											</tr>
										</thead>
									</table>

								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row-fluid" id="content" style="display: none">
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet blue-madison box">
								<div class="portlet-title">
									<div class="caption">
										生成结果
									</div>
								</div>

								<div class="portlet-body">
									<form  class=" form-horizontal" accept-charset="UTF-8"
									action="" autocomplete="off" method="post" style="margin-top: 30px;">

										<div class="form-group" id="queryContent">
											<label class="control-label col-sm-2">序列号:</label>
											<div class="col-sm-4">
												<input name="license" class="form-control" rows="3"></input>
											</div>
										</div>

										<div class="form-group">
											<div class="actions col-sm-offset-2 col-sm-2">
												<button type="button" class="btn btn-primary" style="width: 90%;" id="search"
												onclick="Generator.copy">
													复制到剪贴板
												</button>
											</div>
										</div>

									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

	<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 650px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">
						<i class="fa fa-plus"></i>
						<span id="lblAddTitle" style="font-weight: bold">上传文件</span>
					</h4>
				</div>
				<form class="form-horizontal" id="form" action="" data-toggle="validator" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="row-fluid">

							<div class="form-group">
								<label class="control-label col-sm-3">文件:</label>
								<div class="col-sm-9">
									<input id="input-1" type="file" class="file control-label" name="dataFile" data-show-preview="false"
									data-show-upload="false">
								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer bg-info">
						<input type="hidden" id="ID" name="ID" />
						<button type="button" class="btn blue" onclick="newProject()">确定</button>
						<button type="button" class="btn green" data-dismiss="modal">取消</button>
					</div>
				</form>
			</div>
		</div>
	</div>

			<script>

					$(function () {

						$.ajax({
							url: "@routes.AdminController.getAllFile()",
							type: "get",
							dataType: "json",
							success: function (data) {
								$('#table').bootstrapTable({
									data: data
								});
							}
						})

						bootstrapValidator()


					})

					function operateFmt(value, row, index) {
						return "<a title='删除' onclick=\"deleteData('" + row.name + "')\" style='cursor: pointer;'><span><em class='fa fa-close'></em></span></a>"

					}

					function addressFmt(value, row, index) {
						return "<a href='"+encodeURI(row.address)+"' style='cursor: pointer;'>"+encodeURI(row.address)+"</a>"

					}

					function deleteData(name) {
						swal({
									title: "",
									text: "确定要删除此数据吗？",
									type: "warning",
									showCancelButton: true,
									showConfirmButton: true,
									confirmButtonClass: "btn-danger",
									confirmButtonText: "确定",
									closeOnConfirm: false,
									cancelButtonText: "取消"
								},
								function () {
									$.ajax({
										url: "@routes.AdminController.deleteFile()",
										type: "post",
										data:{
											fileName:name
										},
										success: function (data) {
											$('#table').bootstrapTable("load", data);
											swal("成功！", "删除成功！", "success")
										}
									});
								});
					}

					function progressHandlingFunction(e) {
						if (e.lengthComputable) {
							var percent = e.loaded / e.total * 100;
							$('#progress').html("("+percent.toFixed(2) + "%)");
						}
					}


					function newProject() {
						var form = $("#form")
						var fv = form.data("bootstrapValidator")
						fv.validate()
						if (fv.isValid()) {
							var element = "<div id='content'><span id='info'>正在上传文件<span id='progress'>。。。</span></span>&nbsp;<img class='runningImage' src='/assets/images/running2.gif' style='width: 30px;height: 20px;'></div>"
							var index = layer.alert(element, {
								skin: 'layui-layer-molv'
								, closeBtn: 0,
								title: "信息",
								btn: []
							});
							var form1 = new FormData($("#form")[0])
							$.ajax({
								xhr:function(){
									var myXhr = $.ajaxSettings.xhr();
									if (myXhr.upload) { //检查upload属性是否存在
										//绑定progress事件的回调函数
										myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
									}
									return myXhr
								},

								url: "@routes.AdminController.uploadFile()",
								type: "post",
								processData: false,
								contentType: false,
								data: form1,
								success: function (data) {
									layer.close(index)
									$(".file").fileinput("clear")
									if (data.valid == "false") {
										layer.msg(data.message, {
											icon: 5,
											time: 0,
											closeBtn: 1
										});
									} else {
										$("#addModal").modal("hide")
										fv.resetForm(true)
										swal("成功！", "新增成功！", "success")
										$('#table').bootstrapTable("load", data);
									}

								}
							});
						}
					}

					function bootstrapValidator() {
						$('#form').bootstrapValidator({
							framework: 'bootstrap',
							icon: {
								valid: 'glyphicon glyphicon-ok',
								invalid: 'glyphicon glyphicon-remove',
								validating: 'glyphicon glyphicon-refresh'
							},
							fields: {
								dataFile: {
									validators: {
										notEmpty: {
											message: '请选择一个文件！'
										}
									}
								},
							}
						});

					}

					function addProject() {
						$("#addModal").modal("show")
					}

					$(".file").fileinput({
						showPreview: false,
						browseLabel: "选择...",
						removeLabel: "删除",
						language: "zh"
					});



	</script>

}